<!DOCTYPE html>
<html>

<head>
	<title>角色</title>
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-row">
			<div class="layui-col-md8">
				<div class="layui-card">
					<div class="layui-card-body">
						<form id="searchbar" class="layui-form" onsubmit="javascript:return false;">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">名称</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" name="name">
									</div>
								</div>
								<div class="layui-inline">
									<button class="layui-btn layui-btn-primary" data-toggle="tableSearch"><i
											class="layui-icon layui-icon-search"></i></button>
								</div>
							</div>
						</form>
						<table id="tableRole" lay-filter="tableRole" data-row="showPermission"></table>
						<script type="text/html" id="toolbar">
				  		<div class="layui-btn-container">
				    		<button class="layui-btn layui-btn-sm layui-hide" data-perm="role/add" onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
				  		</div>
						</script>
						<script type="text/html" id="handbar">
					  		<a class="layui-hide" href="javascript:void(0)" data-perm="role/edit" lay-event="custom" data-handle="edit" title="编辑"><i class="layui-icon layui-icon-edit icon-edit"></i></a>
					  		<a class="layui-hide" href="javascript:void(0)" data-perm="role/delete" lay-event="custom" data-handle="deleteHandle" title="删除"><i class="layui-icon layui-icon-delete icon-dele"></i></a>
						</script>
					</div>
				</div>
			</div>
			<div id="rolePerm" class="layui-col-md4 layui-hide">

				<div class="layui-card">
					<div class="layui-card-header">
						<button type="button" id="authBtn" class="layui-btn layui-btn-sm layui-hide"
							data-perm="role/authPermission" style="margin-top: 20px;" onclick="authPermission()"><i
								class="layui-icon layui-icon-auz"></i>赋权</button>
					</div>
					<div class="layui-card-body">
						<hr>
						<div id="treePerm"></div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
		<form  class="layui-form" id="dialogForm" lay-filter="dialogForm" onsubmit="return beforeSubmit();" >
			<input type="text" name="id" hidden>
		 <div class="layui-form-item">
		    <label class="layui-form-label required">ID</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="id" lay-verify="required|length"   lay-verType="tips"    data-maxlen="20" >
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">名称</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="name" lay-verify="required|length"   lay-verType="tips"   data-maxlen="20">
		    </div>
		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">描述</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="description" lay-verType="tips"  data-minlen = "11"  data-maxlen="11">
		    </div>
		  </div>
  		  <div class="layui-form-item">
		    <div class="layui-input-block" align="right"  style="height: auto">
		      <button type="submit" class="layui-btn " >保存</button>
		    </div>
		  </div>
		</form>
		</div>
	</script>
</body>
<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;
	var tableInst = null;
	var treeInst = null;
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};
	$(function () {
		var options = {
			elem: "#tableRole",
			layfilter: "tableRole",
			toolbar: '#toolbar',
			url: "role/search",
			cols: [[
				{field: 'id', title: 'ID'}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				{field: 'name', title: '名称'},
				{field: 'description', title: '描述'},
				{fixed: 'right', title: '操作', templet: '#handbar'}
			]]
		};
		tableInst = content.initTable(options);

		request.post('permission/list', {}).then(res => {
			treeInst = initTree(res.data);
		})
	})

	function add() {
		dialogData.handle = "role/add";
		dialogData.dialogIndex = content.dialog('添加角色', '600px', dialogHtml);
	}

	function edit(row) {
		dialogData.handle = "role/edit";
		dialogData.dialogIndex = content.dialog('修改角色', '600px', dialogHtml);
		$("#dialogForm input[name='id']").addClass("layui-disabled").attr("disabled", "true")
		form.val("dialogForm", row);
	}

	function deleteHandle(row) {
		content.confirm("确认删除角色" + row.name, function () {
			request.postAlert("role/delete", {id: row.id}).then(res => {
				tableInst.reloadData();
			})
		})
	}

	function beforeSubmit() {
		var btn = button.load({elem: "#dialogForm button[type='submit']"});
		if (!form.validate(".layui-form")) {
			btn.stop();
			return false;
		}
		var data = form.val("dialogForm");
		request.postAlert(dialogData.handle, data).then(res => {
			layer.close(dialogData.dialogIndex);
			tableInst.reloadData();
		}).catch(err => {
			btn.stop();
		})
		return false;
	}

	function initTree(data) {
		var tempData = {id: 0, children: []};
		packTreeData(data, tempData);
		return layui.tree.render({
			elem: "#treePerm",
			id: "treePerm",
			showCheckbox: true,
			checkChild: false,//自定义的属性, 选中父节点,子节点不选中
			data: tempData.children
		});
	}

	function showPermission(row) {
		$("#rolePerm").removeClass("layui-hide");
		request.post('permission/listByRoleId', {id: row.id}).then(res => {
			let keys = []
			res.data.forEach(item => {
				if (item.type != '01') {
					keys.push(item.id);
				}
			})
			layui.tree.reload(treeInst.config.id);
			layui.tree.setChecked(treeInst.config.id, keys);
		})


	}

	function packTreeData(data, tempData) {
		for (i in data) {
			if (data[i].pid == tempData.id) {
				var node = {};
				node.title = data[i].title;
				node.id = data[i].id;
				node.spread = true,
					tempData.children.push(node);
				if (data[i].type != '03') {
					node.children = [];
					packTreeData(data, node);
				}
			}
		}
		if (tempData.children.length == 0) {
			delete tempData.children;
		}
	}

	function authPermission() {
		var btn = button.load({elem: "#authBtn"});
		var checkData = layui.table.checkStatus(tableInst.config.id);
		var treeData = layui.tree.getChecked(treeInst.config.id);
		if (checkData.data.length > 0) {
			var item = checkData.data[0];
			var roleId = item.id;
			var ids = [];
			getTreeCheckId(treeData, ids);
			request.postAlert('role/authPermission', {roleId: roleId, permissionIds: ids}).then(res => {
				btn.stop();
			}).catch(err => {
				btn.stop();
			});
		}

	}

	function getTreeCheckId(data, checkIds) {
		for (i in data) {
			var item = data[i];
			checkIds.push(item.id);
			if (item.children && item.children.length > 0) {
				getTreeCheckId(item.children, checkIds)
			}
		}
	}
</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}
</style>

</html>